Optional - Learn from Figma: Create prototypes 建立Figma原型

設定原型互動

1. 開始前的準備

複製一份設計頁面，用來做原型開啟右側面板，切換到 Prototype 模式

2. 連線頁面

選中要點選的元素，會出現一個"+"號，拖動箭頭到目標頁面例如：點選選單圖示跳轉到選單頁；點選"Home"回到首頁

新增動畫效果

觸發方式：點選、懸停等

動畫效果：

• Instant：直接切換，沒有動畫

• Move In/Out：滑入滑出效果，適合選單

• Push：推動效果，適合頁面切換

• Smart Animate：智慧動畫，更流暢

調整動畫細節：

選擇滑入方向（從左邊或右邊）調整動畫速度，讓過渡更流暢

複用選單設定

把選單圖示連線到選單頁面，設定從左滑入的動畫

在其他頁面（如搜尋、個人頁）也新增選單入口

在選單頁新增"返回"按鈕，使用Back 功能可以自動返回上一頁

分享原型並收集反饋

如何分享：點選 Share 按鈕，設定為"任何人可檢視"，複製連結傳送

團隊協作功能：可以看到團隊成員的頭像、可以實時檢視別人在哪裡點選、使用評論功能在原型上標記問題和建議

根據反饋改進原型

新增新圖示（比如點贊、評論、收藏）使用元件功能一次性更新多個相同內容，用自動佈局功能讓內容自動調整位置

常見改進方法

新增返回按鈕：方便關閉選單或返回上一頁

新增互動功能：比如點贊、評論按鈕

連線更多頁面：如新聞頁、設定頁等

最佳化導航體驗：用動畫讓頁面關係更清晰